import { analysisPreview } from '@/services/api/api-tophub-record';
import { RedoOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { useAccess, useModel } from '@umijs/max';
import { Col, DatePicker, Flex, Row, Space, Tooltip } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useEffect, useState } from 'react';
import AnalysisPreviewRecord from './AnalysisPreviewRecord';
import TableRecord from './TableRecord';
import TableRecordWeChat from './TableRecordWeChat';
dayjs.extend(customParseFormat);
const dateFormat = 'YYYY-MM-DD';

interface TabRecordProps {
  hotRankTypes: any[];
}

const TabRecord: React.FC<TabRecordProps> = ({ hotRankTypes }) => {
  const access = useAccess();

  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const [createdTimes, setCreatedTimesState] = useState([
    dayjs().add(-7, 'd').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().format('YYYY-MM-DD HH:mm:ss'),
  ]);

  const [loading, setLoading] = useState(false);

  const [previewData, setPreviewDataState] = useState<TophubRecordData.AnalysisPreview>();

  /**
   * 加载 保存初始化数据
   * @param key
   */
  const loadAnalysisPreview = async () => {
    setLoading(true);
    try {
      const response = await analysisPreview({
        createdTimes: createdTimes,
      });
      const { code, data } = response;
      if (code === 0) {
        setPreviewDataState(data);
        setLoading(false);
      } else {
        // setLoading(false);
      }
    } catch (error) {}
  };

  useEffect(() => {
    loadAnalysisPreview();
  }, [createdTimes]);

  return (
    <Row>
      <Flex
        justify={'space-between'}
        align={'center'}
        style={{
          width: '100%',
          marginBottom: '16px',
        }}
      >
        <Space>
          <span>截止时间：</span>
          <span
            style={{
              color: 'Highlight',
            }}
          >
            {previewData?.executeDate}
          </span>
        </Space>
        <Space>
          <DatePicker.RangePicker
            style={{
              marginRight: 16,
            }}
            defaultValue={[dayjs().add(-7, 'd').startOf('day'), dayjs()]}
            maxDate={dayjs()}
            format={dateFormat}
            variant="filled"
            allowClear={false}
            onChange={(dates, dateStrings) => {
              setCreatedTimesState(dateStrings.map((item) => item + ' 00:00:00'));
            }}
          />
          <Tooltip title="刷新">
            <RedoOutlined
              style={{
                fontSize: 16,
              }}
              onClick={() => {
                loadAnalysisPreview();
              }}
            />
          </Tooltip>
        </Space>
      </Flex>
      <AnalysisPreviewRecord
        loading={loading}
        previewData={previewData}
        onRefurbish={function (): void {
          loadAnalysisPreview();
        }}
      />
      <Col span={24}>
        <>
          <ProCard
            bodyStyle={{
              padding: 0,
            }}
            tabs={{
              items: [
                ...hotRankTypes.map((item) => {
                  return {
                    label: item.name,
                    key: `tab${item.type}`,
                    children: (
                      <TableRecord
                        onRefurbish={function (): void {}}
                        hotType={item.type}
                        hotIcon={item.icon}
                        hotName={item.name}
                        hotCity={0}
                        createdTimes={createdTimes}
                      />
                    ),
                  };
                }),
                {
                  label: `微信榜单`,
                  key: 'tab5',
                  children: (
                    <TableRecordWeChat
                      onRefurbish={function (): void {}}
                      createdTimes={createdTimes}
                    />
                  ),
                },
              ],
            }}
          />
        </>
      </Col>
    </Row>
  );
};
export default TabRecord;
